import React, { Component } from 'react'
import { changeN, minebanner, mineconpon } from '../../store/modules/Mine';
import { bindActionCreators } from 'redux';
import { actions } from '../../store/modules/Mine';
import { connect } from 'react-redux'
import { Swiper } from 'antd-mobile'
import "../Mine/Mine.less"
import { CapsuleTabs } from 'antd-mobile'

export class Mine extends Component {

  componentDidMount() {
    let { Mine: {
      reqgetbanner,
      reqgetcoupon
    } } = this.props;
    reqgetbanner()
    reqgetcoupon()
  }

  render() {
    let arr = ["代金券1","代金券2","代金券3"]
    let { bannerlist,couponlist,Mine:{changeN},n } = this.props;
    console.log(couponlist);
    return (
      <div>
        <Swiper autoplay loop>
          { bannerlist.map((item) => (
            <Swiper.Item key={item.id}>
              <img src={'http://localhost:1000' + item.img} alt="" />
            </Swiper.Item>
          ))
          }
        </Swiper>
        <CapsuleTabs onChange={(index)=>changeN(index)}>
          {arr.map((item,index)=>{
            return(
            <CapsuleTabs.Tab title={item} key={index} >
            {couponlist.length>0? couponlist[n].content.map((i)=>{
              return(
                <div className='moneyphice' key={i.id}>
                  <p>{i.title}</p>
                  <p>{i.begintime}</p>
                  <p>{i.description}</p>
                  <p>结束时间{i.endtime}</p>
                  <p>限额{i.limit_money}</p>
                </div>
              )
            }) : null}
          </CapsuleTabs.Tab>
            )
          })}
        </CapsuleTabs>
      </div>
    )
  }
}



const mapStateToProps = (state) => ({
  bannerlist: minebanner(state),
  couponlist: mineconpon(state),
  n:changeN(state),
});

const mapDispatchToProps = (dispatch) => {
  return {
    Mine: bindActionCreators(actions, dispatch),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Mine);